<template>
<div>
		<h1>这是图片分享</h1>
	<div id="container">
        <ul>
          <li v-for="item in imagelist" :key="item.id">
            <img v-lazy="item.url">
            <div class="span">{{item.title}}</div>
          </li>
        </ul>
    </div>
</div>
	
</template>


<script>
import { Toast } from 'mint-ui'
	export default{
		data(){
			return{
				imagelist:[]
				
			}
		},
		created(){
			this.getImages()

		},
		methods:{
			getImages(){
				this.$http.get("http://jsonplaceholder.typicode.com/photos").then(
					result=>{
						if(result.ok==true){
							this.imagelist=result.body.slice(0,20)
							// console.log(result.body[2])
							
						}else{
							Toast("请求失败")

						}
					}
					)
			}

		}


	}

</script>


<style lang='scss' scoped>
    ul{
    	
    	padding: 10px;
        padding-bottom: 51px;
    	margin: 0;
    	list-style: none;
    	li{ 
    		position: relative;
    		margin-bottom: 3px;
    		background-color: #3333;
    		text-align: center;
    		
    		img[lazy=loading] {
                 width: 40px;
                 height: 300px;
                 margin: auto;
    	}
    	img{
    		width: 100%;
    	}
    	.span{
    		width:100%;
    		position: absolute;
    		bottom: 0;
    		background-color:yellow;
    		// z-index: 99;
    		bottom:0px;
    	}
      }

    }
	

</style>